import React, { useEffect, useState, useRef } from 'react';
import { motion } from "framer-motion"

const Tab: React.FC = (props) => {
  const [tabList, setTabList] = useState([
    {
      name: '显示器'
    },
    {
      name: '智能芯片'
    },
    {
      name: '产品全览'
    },
    {
      name: '机械键盘'
    },
    {
      name: '打包操作'
    },
  ])
  const nameMap = {
    '产品全览': [0, 0, 2, 0, -1, -2],
    '机械键盘': [0, 0, 0, 0, -4, 0],
    '打包操作': [0, 0, 2, 0, -1, -2],
    '智能芯片': [0, 0, -1, 0, -4, 1],
    '显示器': [0, 0, 0, 0, 0, -4],
  }
  const changelist = (i, name) => {
    const newtabList = tabList.slice(i).concat(tabList.slice(0, i));
    const newlist = newtabList.slice(3).concat(newtabList.slice(0, 3));
    props.messageEvent.tab = name
    props.messageEvent.cameraLookAt = nameMap[name]
    setTabList(newlist)
  }
  const retureFontsize = ['25px', '40px', '50px', '40px', '25px'];
  const retureY = ['20px', '-20px', '-60px', '-20px', '20px'];
  const retureX = ['12%', '25%', '40%', '55%', '68%'];
  const renderTabList = tabList.map((item, i) => (
    <motion.div
      key={item.name}
      style={{
        position: 'absolute',
        width: '20%',
        textAlign: 'center'
      }}
      initial={{ opacity: 0, left: i * 20 + '%', }}
      animate={{
        left: retureX[i],
        fontSize: retureFontsize[i],
        y: retureY[i],
        opacity: 1
      }}
      transition={{ type: "tween" }}
      onClick={() => { changelist(i, item.name) }}
    >
      {item.name}
    </motion.div >
  ))
  return (
    <div style={{
      position: 'absolute',
      color: "white",
      display: "flex",
      pointerEvents: "all",
      alignItems: 'flex-end',
      width: '100%',
      bottom: 50,
      zIndex: 9999,
    }}>
      {renderTabList}
    </div>
  );
};

export default Tab;
